mon-site/index.html

Mon premier

site web

Formation ouverte aux débutants

index.html

Salut le web !

Ma toute première page.

Mon profil
HTMLCSSJavaScriptMise en ligne

Ce qu'on va faire

01

Le web

Ce qui se passe quand on tape une adresse.

02

HTML

Écrire le contenu : titres, textes, images, liens.

03

CSS

Mettre en forme : couleurs, polices, mise en page.

04

À vous

Coder sa page, puis la mettre en ligne.

Question

Que se passe-t-il quand
vous tapez une adresse ?

La page s'affiche en moins d'une seconde. Que fait votre ordinateur pendant ce temps ?

01

Le web

Un site, ce sont des fichiers posés sur un ordinateur, quelque part, que votre navigateur va chercher.

  • 1.1Le trajet d'une page
  • 1.2Lire une adresse
  • 1.3HTML, CSS, JS : qui fait quoi

Le trajet d'une page

Votre navigateur le client DNS l'annuaire Le serveur 157.159.40.44

Lire une adresse

https://www.minet.net/_astro/luc.DT3vmMCs_Z9pRXY.webp

Qui fait quoi ?

HTML

Le contenu et sa structure.

CSS

L'apparence : couleurs, polices, placement.

JS

Le comportement : réagir aux clics.

index.html
Photo de Titouan

Titouan

TSP FISE 2028, Head of MiNET Vols & Hybrides.

02

HTML

HyperText Markup Language

  • 2.1Anatomie d'une balise
  • 2.2Le squelette d'une page
  • 2.3Construire une page

Une balise, en détail

<a href="https://minet.net">Le site de MiNET</a>
balise ouvrante
sa valeur
fermante, avec /
un attribut
le contenu, affiché à l'écran

Une balise peut en contenir d'autres. On referme d'abord la dernière ouverte.

Certaines sont seules, sans contenu ni fermeture : <img>, <br>, <meta>.

index.html

        

        

          
Le squelette d'une page

          

          

          

            
Mon premier site

            
Bonjour !

          

        

      

    


    
    

      

        

          
Construisons une page

          

        

        

          
index.html

          

        

        

          
index.html

          

        

      

    


    
    

      

        
Huit balises pour commencer

        

          
<h1>…<h6>Titres
Du plus important au moins important. En général, un seul h1 par page.

          
<p>Paragraphe
Un bloc de texte.

          
<a href>Lien
Vers une autre page, un autre site, une ancre.

          
<img src alt>Image
alt décrit l'image pour ceux qui ne la voient pas.

          
<ul> <li>Liste
ul : à puces, ol : numérotée, li : chaque élément.

          
<div>Boîte
Regroupe des éléments pour les styler ensemble.

          
<button>Bouton
Un élément cliquable, souvent relié au JavaScript.

          
<header> <footer>Zones
En-tête, pied de page, <nav> pour le menu.

        

      

    


    
    

      

        

          
03

          
CSS

          
Cascading Style Sheets

        

        
    
          
  • 3.1Anatomie d'une règle
    • 
          
  • 3.2Styler une carte
    • 
          
  • 3.3Le modèle de boîte
    • 
          
  • 3.4Aligner avec flex
    • 
          
  • 3.5Et le JavaScript ?
    • 
        

      

    


    
    

      

        
Une règle CSS

        

          
h1 {
  color: #3E6FC4;
  font-size: 64px;
}

          
le sélecteur : qui ?

          
la propriété : quoi ?

          
la valeur, puis un ;

        

        

          
Le CSS vit dans style.css, relié dans le <head> : <link rel="stylesheet" href="style.css">

          
Propriétés utiles : color, background, font-size, font-family, margin, padding, border-radius.

        

      

    


    
    

      

        

          
On change de look

          

        

        

          
style.css

          

        

        

          
index.html

          

            
            

              

                Photo de Titouan
                
Titouan

                
Head of MiNET, Vols & Hybrides.

                Me contacter
              

            

          

        

      

    


    
    

      

        

          
Le modèle de boîte

          

        

        

          

            
style.css

            

          

          

        

        

          
margin
            

              

                
contenu

              

            

          

        

      

    


    
    

      

        

          
Aligner avec flex

          

        

        

          

            
style.css

            

          

          

        

        

          
AccueilProjetsContact

        

      

    


    
    

      

        

          
Et le JavaScript ?

          
JavaScript rend la page interactive : il réagit aux actions de l'utilisateur et peut modifier le contenu, l'apparence ou le comportement des éléments.

          
Relié dans le <head> : <script src="script.js" defer></script>

          

        

        

          
script.js

          

        

        

          
index.html

          

            

              
              

                Photo de Titouan
                
Titouan

                
Prêt pour un effet visible ?

                
              

            

          

        

      

    


    
    

      

        

          
04

          
À vous !

        

        
    
          
  • 4.1Les outils
    • 
          
  • 4.2L'inspecteur du navigateur
    • 
          
  • 4.3TP : votre page
    • 
          
  • 4.4Mettre en ligne
    • 
        

      

    


    
    

      

        
Trois outils

        

          

            
            
Un éditeur

            
Visual Studio Code, pour écrire le code avec les couleurs et l'autocomplétion.

            
Extension « Live Server » : la page se recharge toute seule.

          

          

            
            
Un navigateur

            
Firefox ou Safari : double-clic sur index.html pour l'ouvrir.

            
Ctrl+Shift+C ouvre l'inspecteur.

          

          

            
            
Un dossier


mon-site/
├─ index.html
├─ style.css
├─ script.js
└─ images/
   └─ photo.jpg

          

        

      

    


    
    

      

        

          
L'inspecteur

          
Avec Ctrl+Shift+C, survolez un élément : le navigateur montre sa boîte, sa balise et sa taille. Ça marche sur n'importe quel site.

          

        

        

          
index.html

          

            
Titouan

            
TSP FISE 2028, Head of MiNET Vols & Hybrides.

            Photo de Titouan
            Me contacter
            

            

            

          

        

      

    


    
    

      

        

          
TP

          
Votre page de profil

          

            
01
Le contenu
  • Un <h1> avec votre prénom
  • Une photo ou un logo
  • Un paragraphe sur vous
  • Une liste de 3 choses que vous aimez

            
02
Le style
  • Une police et deux couleurs
  • Le tout dans une carte centrée
  • Des coins arrondis, une ombre
  • Un menu aligné avec flex

            
+
Bonus
  • Un effet de confettis en JS
  • Une deuxième page reliée par un lien
  • La mettre en ligne !

          

        

      

    


    
    

      

        

          
Mettre en ligne

          

          
    
        
    
        
    
          
    
          
    
            
    
              
              Votre site est en ligne
              
    
            
    
          
    
        
    
      
    
    
    

    
    
    
      
    
        
    
          
    Merci !
    Des questions ?
    
        
    
        
    
          
    Pour aller plus loin
    
          
    
            
    MDN Web Docsdeveloper.mozilla.org/fr
    
            
    freeCodeCampfreecodecamp.org
    
            
    Flexbox Froggyflexboxfroggy.com/#fr